<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/echarts.min.js"></script>
    <style>
.content{
    width:1200px;
    margin:0 auto;
}
.sd_left{
    width:535px;
    float:left;
}
.sd_left p{
    width:100%;
    height:36px;
    line-height:36px;
    border-bottom: 1px solid #dcdcdc;
}
.mr{
    margin-right:70px;
}

    </style>
</head>
<body>
<div class="content">
    <div class="sd_left mr">
        <p>答题得分率</p>
        <div id="score" style="width:535px; height:310px"></div>
    </div>
    <div class="sd_left">
        <p>大题得分率</p>
        <div id="sifenlv"  style="width:535px; height:310px"></div>
    </div>
</div>
<script type="text/javascript">
    /*第一个echarts图*/
    var myCharts=echarts.init(document.getElementById('score'));
    myCharts.setOption({
        title: {
            text: '答题状况统计',
            left: 'center'
        },
        tooltip: {//提示框组件
            trigger: 'axis',//item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
            //'axis' 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
            formatter: '{a} <br/>{b} : {c}'
        },
        legend: {//图例组件
            left: 'left',
//            data: ['3的指数']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            name: '题号',
            splitLine: {show: true},
            data: ['1', '2', '3', '4', '5']
        },
        yAxis: {
            type: 'value',
            name: '标准差'
        },
        series: [
            {
                name: '题号',
                type: 'line',
                data: [1, 3, 9, 27, 81],
                smooth:true,//控制折线光滑
                itemStyle:{
                    normal:{
                        color:'#00c3a3',
                    }
                }
            },


        ]
    })
    /*第二个图*/
    var myChart2=echarts.init(document.getElementById('sifenlv'));
    myChart2.setOption({
        title: {
            text: '今日&昨日&明日',
            left: '50%',
            textAlign: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type:'line',
                lineStyle: {
                    color: '#E21918'//提示框线条颜色
                }
            },
            backgroundColor: 'rgba(255,255,255,1)',//提示框浮层的背景颜色
            padding: [5, 10],//提示框浮层内边距
            textStyle: {//提示框浮层的文本样式
                color: '#E21918',
            },
            extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'//提示边框的阴影和颜色
        },
        legend: {
            right: 20,
            orient: 'horizontal',//水平方向
            data: ['今日','昨日','明日']
        },
        xAxis: {
            type: 'category',
            data: ['00:00','2:00','4:00','6:00','8:00','10:00','12:00','14:00','16:00','18:00','20:00',"22:00"],
            boundaryGap: false,
            splitLine: {
                show: true,
                interval: '0',//强制坐标点全部显示
                lineStyle: {
                    color: ['#D4DFF5']
                }
            },
            axisTick: {
                show:true
            },
            axisLine: {
                lineStyle: {
                    color: '#609ee9'
                }
            },
            axisLabel: {//设置x轴上属性（字体大小，字体颜色）
                margin:10,//刻度标签与轴线之间的距离
                textStyle: {
                    fontSize: 14//x轴上字体大小
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    color: ['#D4DFF5']
                }
            },
            axisTick: {
                show: true
            },
            axisLine: {
                lineStyle: {
                    color: '#609ee9'
                }
            },
            axisLabel: {
                margin: 10,//刻度标签与轴线之间的距离
                textStyle: {
                    fontSize: 14,
                    color:'#E21918',//y轴上字体颜色
                }
            }
        },
        series: [{
            name: '今日',
            type: 'line',
            smooth: true,//否平滑曲线显示
            showSymbol: false,
            symbol: 'rect',//标记的图形//ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            symbolSize: 6,//标记的大小
            data: ['1200', '1400', '1008', '1411', '1026', '1288', '1300', '800', '1100', '1000', '1118', '1322'],
            areaStyle: {//区域填充样式
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(199, 237, 250,0.5)'
                    }, {
                        offset: 1,
                        color: 'rgba(199, 237, 250,0.2)'
                    }], false)
                }
            },
            itemStyle: {
                normal: {
                    color: '#f7b851'
                }
            },
            lineStyle: {
                normal: {
                    width: 1
                }
            }
        }, {
            name: '昨日',
            type: 'line',
            smooth: true,
            showSymbol: false,
            symbol: 'circle',
            symbolSize: 6,
            data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822'],
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(216, 244, 247,1)'
                    }, {
                        offset: 1,
                        color: 'rgba(216, 244, 247,1)'
                    }], false)
                }
            },
            itemStyle: {
                normal: {
                    color: '#58c8da'//线条颜色
                }
            },
            lineStyle: {
                normal: {
                    width: 1//线条宽度
                }
            }
        },{
            name: '明日',
            type: 'line',
            smooth: true,
            showSymbol: false,
            symbol: 'circle',
            symbolSize: 6,
            data: ['1000', '1400', '808', '811', '106', '488', '1000', '1100', '500', '300', '1000', '822'],
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(216, 244, 247,1)'
                    }, {
                        offset: 1,
                        color: 'rgba(216, 244, 247,1)'
                    }], false)
                }
            },
            itemStyle: {
                normal: {
                    color: '#f8b551'//线条颜色
                }
            },
            lineStyle: {
                normal: {
                    width: 1//线条宽度
                }
            }
        }]
    })
</script>
</body>
</html>